<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
	href="${ pageContext.request.contextPath }/js/css/bootstrap.css">
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/jquery-1.11.1.js"></script>
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/bootstrap.js"></script>
<style type="text/css">
table {
	text-align: center;
}

body {
	background-image:
		url("${ pageContext.request.contextPath }/files/beijing.jpg");
	width: 80%;
	text-align: center;
	margin: 0 auto;
}

.popover {
	min-width: 150px;
}

.error {
	border: 1px red dashed;
}

label.error {
	border: none;
	color: red;
	position: absolute;
	top: 8px;
	right: 20px;
}
</style>
<body>
	<%@include file="/html/nav.html"%>
	<div class="col-xs-6 col-xs-offset-3">
		<form action="editTeacher.do" method="post" class="form-horizontal">
			<div class="panel panel-primary" style="margin-top: 100px">
				<div class="panel-heading">教师基本信息编辑</div>
				<div class="panel-body">
					<div class="form-group">
						<label for="tchName" class="control-label col-xs-3 text-right">教师姓名：</label>
						<div class="col-xs-8">
							<input type="text" id="tchName" name="tchName"
								class="form-control" value="${teacher.name}">
						</div>
					</div>
					<div class="form-group">
						<label for="nicheng" class="control-label col-xs-3 text-right">昵称：</label>
						<div class="col-xs-8">
							<input type="text" id="nicheng" name="nicheng"
								class="form-control" value="${teacher.getInfo().nicheng}">
						</div>
					</div>
					<div class="form-group">
						<label for="sex" class="control-label col-xs-3 text-right">性别：</label>
						<div class="col-xs-8">
							<select class="btn btn-default" id="sex"
								style="height: 34px; width: 326px" name="sex">
								<option value="男">男</option>
								<option value="女">女</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="age" class="control-label col-xs-3 text-right">年龄：</label>
						<div class="col-xs-8">
							<select class="btn btn-default" id="age"
								style="height: 34px; width: 326px" name="age">
								<c:forEach var="i" begin="20" end="75" step="1">
									<option value="${i}">${i}</option>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="birthday" class="control-label col-xs-3 text-right">生日：</label>
						<div class="col-xs-8">
							<input type="date" class="form-control"
								value="${teacher.getInfo().birthday}" id="birthday"
								name="birthday">
						</div>
					</div>
					<div class="form-group">
						<label for="phone" class="control-label col-xs-3 text-right">手机号：</label>
						<div class="col-xs-8">
							<input type="text" id="phone" name="phone" class="form-control"
								value="${teacher.phone}">
						</div>
					</div>
					<div class="form-group">
						<label for="email" class="control-label col-xs-3 text-right">邮箱：</label>
						<div class="col-xs-8">
							<input type="email" id="email" name="email" required="required"
								class="form-control" value="${teacher.email}">
						</div>
					</div>
					<div class="form-group">
						<label for="qq" class="control-label col-xs-3 text-right">QQ：</label>
						<div class="col-xs-8">
							<input type="text" id="qq" name="qq" class="form-control"
								value="${teacher.getInfo().qq}">
						</div>
					</div>
					<div class="form-group">
						<label for="dizhi" class="control-label col-xs-3 text-right">地址：</label>
						<div class="col-xs-8">
							<input type="text" id="dizhi" name="dizhi" class="form-control"
								value="${teacher.getInfo().dizhi}">
						</div>
					</div>
					<div class="form-group">
						<label for="createDate" class="control-label col-xs-3 text-right">创建日期：</label>
						<div class="col-xs-8">
							<input type="date" class="form-control"
								value="${teacher.getInfo().createDate}" id="createDate"
								name="createDate">
						</div>
					</div>
					<div class="form-group">
						<label for="pwd" class="control-label col-xs-3 text-right">登录密码：</label>
						<div class="col-xs-8">
							<input type="text" id="pwd" name="pwd" class="form-control"
								value="${teacher.pwd}">
						</div>
					</div>
				</div>
				<div class="panel-footer">
					<div class="col-xs-offset-6">
						<button class="btn btn-primary" type="submit">提交</button>
						<a href="/AAA/mgr.tea.query" class="btn btn-default">返回</a>
					</div>
				</div>
			</div>
		</form>
	</div>

	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/jquery.validate.min.js"></script>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/additional-methods.min.js"></script>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/messages_zh.min.js"></script>
	<script type="text/javascript">
		$("#sex option[value='${teacher.getInfo().sex}']").attr("selected",
				"selected");
		$("#age option[value='${teacher.getInfo().age}']").attr("selected",
				"selected");
		jQuery.validator.addMethod("isPwd", function(value, element) {
			var tel = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,15}$/;
			return this.optional(element) || (tel.test(value));
		}, "请输入6~15位由字母、数字、字符组成的密码");
		$(function() {
			$('[data-toggle="popover"]').popover();
			$("form").validate({
				rules : {
					tchName : {
						required : true,
						rangelength : [ 2, 15 ]
					},
					nicheng : {
						required : true,
						rangelength : [ 2, 8 ]
					},
					phone : {
						required : true
					},
					qq : {
						required : true
					},
					dizhi : {
						required : true
					},
					pwd : {
						required : true,
						isPwd : true
					},
				},
				messages : {
					tchName : {
						rangelength : '账号位数不符合要求'
					},
					pwd : {
						rangelength : '密码位数不符合要求'
					},
				},
			});
		});
	</script>
</body>
</html>